<template>
    <!-- <div> -->
        <video 
            ref="videoPlayer" 
            id="videoplayer" 
            class="video-js vjs-big-play-centered" 
            
        >
        </video>
    <!-- </div> -->
</template>

<script>
export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    data () {
        return {
            player: null
        };
    },
    created () {
        
    },
    mounted () {
        this.initVideo();
    },
    beforeDestroy () {
        if (this.player) {
            this.player.dispose();
        }
    },
    methods: {
        initVideo() {
        // 从created和mounted中,需要用this.$nextTick
        // this.$nextTick( () => {
            this.player = this.$VideoJs(this.$refs.videoPlayer, this.options, function () {
                // 播放开始
                this.on("play",function () {
                    console.log('播放play了')
                });
                // 初始化播放条位置
                this.on("loadedmetadata",function () {
                    console.log('loadedmetadata')
                });
                // 初始化播放条位置
                this.on("canplaythrough",function () {
                    console.log('canplaythrough')
                });
                // 初始化播放条位置
                this.on("durationchange",function () {
                    console.log('durationchange')
                });
                // error
                this.on("error",function () {
                    console.log('error')
                });
                // ended
                this.on("ended",function () {
                    console.log('ended')
                });
                // this.on("play",function () {
                //     console.log('播放play了')
                // });
            });
            const player = this.$VideoJs('videoplayer_html5_api');
            player.ready(function () {
                let _this = this;
                _this.playbackRate( parseFloat(4));
            });
        }
        // });
        
    }
};
</script>
<style>
    .videoplayer-dimensions.vjs-fluid {
        padding-top: 50%;
        width: 100%;
    }
</style>